<template>
  <div class="c-ph24" v-if="typeBar == 1">
    <div
      class="c-w100 c-pv24 c-bd-b1"
      v-for="(item, index) in getTabList"
      :key="index"
      @click="getFeedsDetail(item)"
    >
      <!-- top -->
      <div class="c-flex-row">
        <div class="c-ww64 c-hh64 c-brp50">
          <img
            class="c-w100 c-h c-brp50"
            v-lazy="item.headimgurl || require('@/assets/defult_head.png')"
            alt=""
          >
        </div>
        <div class="c-pl12 c-flex-column c-justify-sb c-flex-grow1 c-w0">
          <div class="c-flex-row c-justify-sb">
            <div class="c-fs24 c-fc-xblack c-flex-row c-aligni-center">
              <span>{{item.nickname}}</span>
              <span
                class="circle_m c-ml12"
                v-if="item.role == 2"
              ></span>
            </div>
          </div>
          <div class="c-fs20 c-fc-gray">{{createdAtTime(item.createdAt)}}</div>
        </div>
      </div>
      <!-- content -->
      <div class="c-w100 c-pt16">
        <!-- 文字 -->
        <div class="c-fc-xblack c-fs24 c-ws-pw c-p c-text-ellipsis2 c-vcAlign-middle">
          <span
            class="top c-fs20 c-br4 c-fc-xblue c-mr10"
            v-if="item.isTop == 1"
          >
            <i class="iconfont c-fs14">&#xe704;</i> 置顶
          </span>
          <span
            class="select c-mr10 c-fs20 c-br4"
            v-if="item.isEssence == 1"
          >
            <i class="iconfont c-fs14">&#xe721;</i> 精选
          </span>
          <span
            v-if="item.feedsContent != null || item.feedsContent != ''"
            v-html="highlights(item.feedsContent)"
          ></span>
        </div>
      </div>
    </div>
    <loading-status-tem
      :dataStatus="dataStatus"
      :noDataTextClass="'c-ws-pw c-fs24 c-fc-gray'"
      :noDataText="`暂无相关记录${'\n'}要不换个关键词试试?`"
    ></loading-status-tem>
  </div>
  <div class="c-ph24" v-else-if="typeBar == 2">
    <div
      class="c-w100 c-pv24 c-bd-b1 c-flex-row c-aligni-center"
      v-for="(item, index) in getTabList"
      :key="index"
      @click="handleClickCircleIndex(item)"
    >
      <img
        class="c-ww64 c-hh64 imgCloseBig c-brp50"
        :src="$addXossFilter(item.headimgurl || require('@/assets/defult_head.png'))"
        alt=""
      >
      <span
        class="c-fs24 c-fc-sblack c-ml20 c-text-ellipsis1"
        v-html="highlights(item.nickname)"
      ></span>
      <img
        class="c-ww80 c-ml12"
        :src="require('@/assets/i/wap/circle/circle_m.png')"
        v-if="item.role == 2"
      >
      <img v-if="item.isAnswer == 1 && companyAuth.enableQuestionModule == 1" class="c-ww80 c-ml12" :src="require('@/assets/i/wap/circle/answer_m.png')" alt="">
    </div>
    <loading-status-tem
      :dataStatus="dataStatus"
      :noDataTextClass="'c-ws-pw c-fs24 c-fc-gray'"
      :noDataText="`暂无相关记录${'\n'}要不换个关键词试试?`"
    ></loading-status-tem>
  </div>
  <div class="c-ph24" v-else-if="typeBar == 3">
    <div
      class="c-flex-column c-pv24 c-bd-b1"
      v-for="(item, index) in getTabList"
      :key="index"
      @click="handleClickThemeRoute(item)"
    >
      <div class="c-fs24 c-fc-xblack c-text-ellipsis2">
        <i class="iconfont theme-fc c-pr8">&#xe6fd;</i>
        <span v-html="highlights(item.themeName)"></span>
      </div>
      <div class="c-mt12 c-flex-row c-justify-sb c-fs20 c-fc-gray c-aligni-center">
        <div>
          <span>{{item.joinMemberCount | formatTenThousand}}人加入</span> |
          <span>{{item.feedCount | formatTenThousand}}条动态</span>
        </div>
        <div class="c-fs20 theme-fc">免费</div>
      </div>
    </div>
    <loading-status-tem
      :dataStatus="dataStatus"
      :noDataTextClass="'c-ws-pw c-fs24 c-fc-gray'"
      :noDataText="`暂无相关记录${'\n'}要不换个关键词试试?`"
    ></loading-status-tem>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
export default {
  name: "CircleSearchTab",
  components: {
    loadingStatusTem
  },
  props: {
    enableQuestion: {
      type: Number,
      default: -1
    },
    typeBar: {
      type: Number,
      default: 1
    },
    getTabList: {
      type: Array,
      default: []
    },
    dataStatus: {
      type: String,
      default: 'HAS_MORE_DATA'
    },
    searchText: {
      type: String,
      default: ""
    }
  },
  computed: {
    createdAtTime() {
      return function (time) {
        let timeStr = utilJs.changeCommentTime(time);
        return timeStr;
      }
    },
    highlights() {
      return function (name) {
        let title = name;
        if (!title) {
          return '';
        }
        if (this.searchText && this.searchText.length > 0) {
          // 匹配关键词
          let replaceReg = new RegExp(this.searchText, 'gi');
          // 高亮替换
          title = title.replace(replaceReg, function (txt) {
            return '<span class="theme-fc">' + txt + '</span>';
          });
        }
        return title;
      }
    },
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") || 'mb5_default',
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
    }
  },
  methods: {
    getFeedsDetail(item) {
      this.$emit("getFeedsDetail", item)
    },
    handleClickCircleIndex(item) {
      this.$emit("handleClickCircleIndex", item)
    },
    handleClickThemeRoute(item) {
      this.$emit("handleClickThemeRoute", item)
    },
  }
}
</script>

<style lang="scss" scoped>
.circle_m {
  display: inline-block;
  width: 1.95rem;
  height: 0.7rem;
  background: url("../../../assets/i/wap/circle/circle_m.png") no-repeat center
    center;
  background-size: contain;
}
.top {
  background: #e8f4ff;
  padding: 0 0.2rem;
  height: 0.7rem;
  vertical-align: middle;
  .iconfont {
    position: relative;
    top: -1px;
  }
}
.select {
  background: #fff1e5;
  padding: 0 0.2rem;
  height: 0.7rem;
  color: #ff7800;
  vertical-align: middle;
  .iconfont {
    position: relative;
    top: -1px;
    color: #ff7800;
  }
}
.thumbnail {
  margin-top: 0.2rem;
}
.thumbnail:nth-child(3n + 2) {
  margin-left: 0.2rem;
  margin-right: 0.2rem;
}
</style>